<template>
    <div
        class="adv-swiper"
        v-if="swiperList"
    >
        <swiper
            :options="swiperOption"
            ref="mySwiper"
            v-if="showSwiper"
        >
            <swiper-slide
                class="swiper-slide"
                v-for="(item,index) of swiperList"
                :key="index"
            >
                <img
                    class="swiper-img"
                    :src="item.title_img"
                />
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'AdvSwiper',
    data() {
        return {
            isShow: true,
            swiperOption: {
                autoplay: 3000,
                loop: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 10,
                observer: true,
                onClick: () => {
                    let swiper = this.$refs.mySwiper.swiper
                    let i = swiper.realIndex
                    this.$router.push(this.swiperList[i].link)
                }
            },
            swiperList: []
        }
    },
    mounted() {
        this.getAdvList()
    },
    methods: {
        getAdvList() {
            let postData = this.qs.stringify({
                act: 'index2'
            })
            this.axios.post('/api/banner.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.swiperList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        }
    },
    computed: {
        showSwiper() {
            return this.swiperList.length
        }
    },
    activated() {
        this.isShow = true
    },
    deactivated() {
        this.isShow = false
    }
}
</script>

<style lang="stylus" scoped>
.adv-swiper
    margin 0.18rem 0
    .swiper-slide
        width 8.98rem
        .swiper-img
            width 8.98rem
            height @width * 0.31
</style>


